<template>
  <div class="group-avatar-container" :style="{ width: size, height: size }">
    <div class="group-avatar-grid" :class="gridClass">
      <div
        v-for="(member, index) in displayMembers"
        :key="member.id || index"
        class="grid-cell"
        :style="getCellStyle(index)"
      >
        <img
          v-if="member.avatar"
          :src="member.avatar"
          class="cell-image"
          @error="handleImageError($event, member)"
        />
        <div
          v-else
          class="cell-placeholder"
          :style="getAvatarStyle(member.id || member.name || String(index))"
        >
          {{ (member.name?.[0] || member.id?.[0] || 'U').toUpperCase() }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { getAvatarStyle } from '@/utils/avatar'
import { API_BASE_URL } from '@/config/env'

export interface GroupMember {
  id?: string
  name?: string
  avatar?: string
  file_name?: string
}

const props = withDefaults(defineProps<{
  members: GroupMember[]
  size?: string
}>(), {
  size: '48px'
})

// 最多显示9个成员
const displayMembers = computed(() => {
  return props.members.slice(0, 9)
})

// 根据成员数量确定网格布局
const gridClass = computed(() => {
  const count = displayMembers.value.length
  if (count <= 1) return 'grid-1'
  if (count <= 4) return 'grid-4'
  if (count <= 9) return 'grid-9'
  return 'grid-9'
})

// 获取单元格样式
const getCellStyle = (index: number) => {
  const count = displayMembers.value.length
  if (count === 1) {
    return {}
  }
  // 对于2-9个成员，添加边框间距
  return {
    border: '1px solid rgba(255, 255, 255, 0.3)',
  }
}

// 处理图片加载错误
const handleImageError = (event: Event, member: GroupMember) => {
  const img = event.target as HTMLImageElement
  img.style.display = 'none'
}

// 获取头像URL
const getAvatarUrl = (member: GroupMember): string | null => {
  if (member.avatar) {
    return member.avatar
  }
  if (member.file_name) {
    return `${API_BASE_URL}/api/upload/${member.file_name}`
  }
  return null
}
</script>

<style lang="sass" scoped>
.group-avatar-container
  position: relative
  border-radius: 6px
  overflow: hidden
  background: #f0f0f0
  flex-shrink: 0

.group-avatar-grid
  width: 100%
  height: 100%
  display: grid
  gap: 0

.grid-1
  grid-template-columns: 1fr
  grid-template-rows: 1fr

.grid-4
  grid-template-columns: repeat(2, 1fr)
  grid-template-rows: repeat(2, 1fr)

.grid-9
  grid-template-columns: repeat(3, 1fr)
  grid-template-rows: repeat(3, 1fr)

.grid-cell
  position: relative
  overflow: hidden
  display: flex
  align-items: center
  justify-content: center
  background: #f0f0f0

.cell-image
  width: 100%
  height: 100%
  object-fit: cover
  display: block

.cell-placeholder
  width: 100%
  height: 100%
  display: flex
  align-items: center
  justify-content: center
  color: white
  font-weight: 500
  font-size: 10px
  letter-spacing: 0
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-transform: uppercase
</style>

